import { ref } from "vue"
import { useEventListener } from './event'

// 获取scrollTop兼容
function getScrollTop() {
	const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
	return scrollTop
}

export function useScrollEvent() {
  // 距离底部的物理像素值
  const docBottomSide = ref<number>(0)
  // 距离顶部的物理像素值
  const docTopSide = ref<number>(0)
  // devicePixelRatio
  const dpr = ref<number>(window.devicePixelRatio)

  const scrollEvent = () => {
    // 高度
    const docScrollTop = getScrollTop()
    // 页面高度
    const docClientHeight = document.body.clientHeight && document.documentElement.clientHeight
    // 文档实际高度
    const docScrollHeight = document.body.scrollHeight
    docBottomSide.value = docScrollHeight - docScrollTop - docClientHeight
    docTopSide.value = docScrollTop
  }

  useEventListener(window, 'scroll', scrollEvent)

  return { docBottomSide, docTopSide, dpr }
}